<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="checkForm" size="small" :inline="true" id="aasas">
      <el-form-item label="请选择" prop="device" label-width="100px">
        <el-select
          v-model="selectDevice"
          placeholder="请选择"
          clearable
          @change="deviceChange">
          <el-option
            v-for="item in devices"
            :key="item"
            :label="item"
            :value="item"/>
        </el-select>
        <!--        <el-select
                  v-model="selectDevice"
                  placeholder="请选择"
                  clearable
                  @change="deviceChange">
                  <el-option
                    v-for="obj in devices"
                    :key="obj.code"
                    :label="obj.name"
                    :value="obj.code"/>
                </el-select>-->
      </el-form-item>
      <el-form-item label="请选择时间" prop="time11" label-width="100px">
        <el-select
          v-model="selectTime"
          placeholder="请选择时间"
          clearable
          @change="timeChange">
          <el-option
            v-for="obj in times"
            :key="obj.code"
            :label="obj.name"
            :value="obj.code"/>
        </el-select>
      </el-form-item>
    </el-form>
    <!--图表区域, 遍历数组，还有就是遍历map-->
    <!--    <span v-for="tmp in chars">
        <el-row>
          <el-col :span="24" class="card-box">
            <div :id="tmp-1" style="width:80%;height:200px">{{ tmp }}</div>
          </el-col>
        </el-row>
        </span>-->
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {list} from "@/api/iot/tend";
import {listDevices, listjing} from "@/api/iot/mon";

export default {
  data() {
    return {
      checkForm: {},
      queryParams: {},
      devices: [],
      selectDevice: '',
      times: [
        {
          "code": "1",
          "name": "本日"
        }, {
          "code": "2",
          "name": "本月"
        }, {
          "code": "3",
          "name": "本年"
        }
      ],
      selectTime: '1',
      deviceId: '',
      timeType: '',
      chars: 0
    };
  },
  // 页面初始化挂载dom
  mounted() {

    // 查询井列表
    listjing().then(res => {
      if (res.code == 200) {
        var attr = res.data;
        this.devices = attr
        // 默认选中第一井
        this.selectDevice = this.devices[0];
        // 默认选中本日，注意1和'1'的区别
        this.selectTime = '1';
        this.queryList();
      }
    })
  },
  methods: {
    deviceChange(deviceId) {
      this.deviceId = deviceId;
      this.queryList();
    },
    timeChange(timeType) {
      this.timeType = timeType;
      this.queryList();
    },
    queryList() {
      list({
        deviceId: this.selectDevice,
        timeType: this.selectTime
      }).then(res => {
        if (res != null && res.code == 200) {
          var aasas = document.getElementById("aasas");

          var trendAreaLast = document.getElementById("trendArea"); // 获取折线图区域
          if (trendAreaLast != null) { // 存在则清空
            trendAreaLast.remove();
          }

          // 开始重新创建
          var das = document.createElement("div");
          das.setAttribute("id", "trendArea");
          //das.setAttribute("style", "border: solid 1px red");
          aasas.append(das) // 追加到文档流上

          var area = document.getElementById("trendArea");
          // 创建图标的个数
          for (var a = 0; a < res.data.length; a++) {
            let elRow = document.createElement('el-row');
            elRow.setAttribute("id", "bbb")
            let elCol = document.createElement('el-col');
            elCol.setAttribute("span", "24")
            elCol.setAttribute("id", "card-box")

            let div = document.createElement('div');
            div.setAttribute("id", "charts_" + a);
            div.setAttribute("style", "width:100%;height:250px");
            //div.innerHTML = a;

            elCol.appendChild(div);
            elRow.appendChild(elCol);

            area.append(elRow);

            // 在dom上开始渲染数据
            var char = echarts.init(document.getElementById("charts_" + a));
            char.setOption(res.data[a])
          }
        } else {
          // 重置
          //this.myChart.resize();
        }
      })
    }
  }
};
</script>
<style scoped>
.trendArea {
  border: solid 1px red;
}
</style>
